<template>
	<view v-if="display" class="interview-list-block">
		<view class="interview-content">
			<view class="title-block">
				<view class="card-title">视频面试</view>
				<view @click="closeCard" class="close">关闭</view>
			</view>
			<view class="content-block">
				<block v-if="list.length>0">
					<view v-for="(item,index) in list" :key="item.id" class="interview-item">
						<view @click="navigate(item.id)" class="interview-info">
							<view class="interview-position" v-if="item.minSalary">{{item.jobTitle}} · {{item.minSalary}}-{{item.maxSalary}}元</view>
							<view class="interview-position" v-else>{{item.jobTitle}} · 面议</view>
							<view class="time">面试时间：{{item.interviewTime}}</view>
						</view>
						<view class="btn-block">
							<view v-if="item.plan==1" @click="navigate(item.id)" class="status-btn disabled">面试待接受</view>
							
							<view v-if="item.plan==2&&item.timeTest==1&&identity==1" class="status-btn disabled">待对方发起面试</view>
							<view v-if="item.plan==2&&item.timeTest==1&&identity==2" @click="startInterview(item.id)" class="status-btn">发起面试</view>
							<view v-if="item.plan==2&&item.timeTest==1&&identity==2" @click="endInterview(item.id)" style="color: #ff7626;border: 1px solid #ff7626;background: none;" class="status-btn">结束面试</view>
							<view v-if="item.plan==2&&item.timeTest==2" class="status-btn disabled">未到面试时间</view>
							
							<view v-if="item.plan==3" class="status-btn disabled">面试结束</view>
							<view v-if="item.plan==4&&identity==1" class="status-btn disabled">已拒绝</view>
							<view v-if="item.plan==4&&identity==2" class="status-btn disabled">对方已拒绝</view>
						</view>
						
						
						<view @click="tips(item)" v-if="item.plan!=3" class="tips iconfont icon-wenti"></view>
						<view v-else style="visibility: hidden;" class="tips iconfont icon-wenti"></view>
					</view>
				</block>
				<view v-else class="empty">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getInterviewRecordList,submitInterview} from '@/api/interview.js';
	import {getToAccount,getPhoneByImUserID} from '@/util/im.js'
	export default{
		data(){
			return{
				list:[]
			}
		},
		computed:{
			identity(){
				return this.$store.getters.identity
			}
		},
		props:{
			display:{
				type:Boolean,
				default:false
			},
			conversation:{//当前会话
				type:Object,
				default:{}
			}
		},
		watch:{
			display(e){
				if(e){
					this.getList();
				}
			}
		},
		methods:{
			getList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				const userID=getToAccount(this.conversation);
				const mobile=getPhoneByImUserID(userID);
				getInterviewRecordList({userType:this.identity,mobile}).then((res)=>{
					uni.hideLoading()
					this.list=res;
				}).catch((res)=>{
					uni.hideLoading();
					this.showToast('加载失败，请重试');
				})
			},
			closeCard(){
				uni.$emit('closeCard','displayInterview')
			},
			navigate(id){
				this.closeCard();
				let url=''
				const isMine=this.identity==2;
				const userID=getToAccount(this.conversation);
				url=`/page_other/interview/view?id=${id}&isMine=${isMine}&userID=${userID}`;
				uni.navigateTo({url});
			},
			startInterview(id){
				uni.showModal({
					title:'提示',
					content:'确定发起面试吗',
					success:(e)=>{
						if(e.confirm){
							this.closeCard();
							uni.$emit('startInterview',id);
						}
					}
				})
			},
			endInterview(id){
				uni.showModal({
					title:'提示',
					content:'确定结束面试吗',
					success:(e)=>{
						if(e.confirm){
							uni.showLoading({
								title:'加载中',
								mask:true
							})
							submitInterview({id,plan:3}).then((res)=>{
								uni.hideLoading();
								this.showToast('操作成功',()=>{
									this.getList();
								})
							}).catch((res)=>{
								uni.hideLoading();
								this.showToast('操作失败');
							})
						}
					}
				})
			},
			tips(data){
				const plan=data.plan;
				const timeTest=data.timeTest;
				let msg='';
				switch(plan){
					case 1:
						msg=this.identity==1?'对方向您发起了面试邀请，请点击邀请消息或面试列表处理':'已发送面试邀请，等待对方接受'
						break;
					case 2:
						if(timeTest==1){
							msg=this.identity==1?'面试时间已到，请在聊天页等待对方发起面试':'面试时间已到，请尽快发起面试'
						}else{
							msg='未到面试时间，请按时参加面试'
						}
						break;
					case 3:
						msg='面试已结束';
						break;
					case 4:
						msg=this.identity==1?'您已拒绝面试邀请':'对方拒绝了面试邀请';
						break;
				}
				uni.showModal({
					title:'提示',
					content:msg,
					showCancel:false,
					confirmText:'知道了'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.interview-list-block{
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
	}
	.interview-content {
		position: absolute;
		width: 100%;
		height: 60%;
		bottom: 0;
		background: #F4F5F9;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 200;
		.title-block{
			padding: 0 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 80rpx;
			border-bottom: 1px solid #efefef;
			.card-title{
				flex-grow: 1;
			}
			.close{
				color: #ff7626;
				flex-grow: 0;
			}
		}
		.content-block{
			display: flex;
			flex-direction: column;
			padding:0 30rpx;
			overflow-y: scroll;
			height: calc(100% - 80rpx);
			.interview-item{
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1px solid #efefef;
				.interview-info{
					width: calc(100% - 280rpx);
					margin-right: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content:center;
					height: 100%;
					.time{
						font-size: 28rpx;
						color: #999;
						margin-top: 10rpx;
					}
					view{
						width: 100%;
						flex: none;
						overflow:hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.btn-block{
					width: 210rpx;
					.status-btn{
						background: #ff7626;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 60rpx;
						width: 100%;
						padding: 0 16rpx;
						border-radius: 8rpx;
						font-size: 24rpx;
					}
					.status-btn:nth-child(2){
						margin-top: 16rpx;
					}
				}
				.status-btn.disabled{
					background: #e5e5e5;
					color: #999;
				}
				.tips{
					color: #999;
					font-size: 44rpx;
					margin-left: 20rpx;
				}
			}
			.interview-item:last-child{
				border-bottom: none;
			}
		}
	}
</style>